<template>
  <div class="newModel">
    <div>
      <div class="topSec">
        <span>
          <div class="form-head-name">投保人信息</div>
          <div class="tit_tips">购买本保险，交保费的人</div>
        </span>
      </div>
      <!-- 姓名 name-->
      <van-field
        label="姓名"
        :input-align="inputAlign"
        class="refname"
        v-model="userInfo.name"
        clearable
        placeholder="请输入"
        :error-message="tipsInfo.name"
        :error-message-align="inputAlign"
        @click="tipsInfo.name = ''"
        @blur="validInfo('name')"
      >
      </van-field>
      <van-field
        label="证件类型"
        :input-align="inputAlign"
        class="refidType"
        v-if="infoReg.hasOwnProperty('idType')"
        @click="showPopAction('picker', 'idType', idTypeList, userInfo.idType)"
        :value="userInfo.idName"
        readonly
        placeholder="请选择"
        @focus="tipsInfo.idType = ''"
        :error-message="tipsInfo.idType"
        :error-message-align="inputAlign"
      >
        <span
          class="ms-row-icon"
          slot="right-icon"
          v-if="idTypeList.length > 1"
        ></span>
      </van-field>
      <!-- 证件号码 idNum-->
      <van-field
        class="refidNum"
        label="证件号码"
        :input-align="inputAlign"
        :error-message-align="inputAlign"
        v-model="userInfo.idNum"
        clearable
        placeholder="请输入"
        :error-message="tipsInfo.idNum"
        @click="tipsInfo.idNum = ''"
        @focus="foI = true"
        @blur="
          foI = false;
          validInfo('idNum');
        "
      >
        <MsImgIcon
          name="camera_l"
          size="22"
          slot="button"
          @click.native="showSheet = true"
        />
      </van-field>
      <van-field
        label="性别"
        :input-align="inputAlign"
        class="refsex btn_pad3"
        v-if="infoReg.hasOwnProperty('sex')"
      >
        <div slot="input">
          <span class="btn_text" v-if="disabledSex">
            {{ userInfo.sexName || "男" }}
          </span>
          <MsRadio
            v-else
            :curVal="userInfo.sex"
            btnType="sex"
            labelName="text"
            valueName="keyId"
            :arrList="sexList"
            @clickEvent="changeSexClick"
          />
        </div>
      </van-field>
      <van-field
        label="出生日期"
        placeholder="请选择"
        :input-align="inputAlign"
        class="refbirthDate"
        @click-input="showPopAction('date', 'birthDate', [])"
        @focus="tipsInfo.birthDate = ''"
        :error-message="tipsInfo.birthDate"
        :error-message-align="inputAlign"
        readonly
        v-if="infoReg.hasOwnProperty('birthDate')"
      >
        <div class="age-box" slot="input">
          <span v-if="userInfo.birthDate">
            {{ userInfo.birthDate }} ( {{ ageVal }}周岁 )
          </span>
          <span v-else style="color: #b2b2b2">请选择</span>
        </div>
        <span class="ms-row-icon" slot="right-icon" v-if="!disabledSex"></span>
      </van-field>
      <!-- 证件有效期 -->
      <van-field
        v-if="infoReg.hasOwnProperty('validDateEnd')"
        class="set_flex1 refvalidDateEnd btn_pad3"
        :input-align="inputAlign"
      >
        <div slot="label" class="userSelect">
          <span>证件有效期</span>
          <FieldDescMode field="validDateEnd" />
        </div>
        <div slot="input">
          <MsRadio
            :curVal="longTime !== userInfo.validDateEnd"
            btnType="validDateEnd"
            labelName="text"
            valueName="keyId"
            flexName="mag0"
            :arrList="[
              { text: '长期', keyId: false },
              { text: '非长期', keyId: true },
            ]"
            @clickEvent="sameToLongTime"
          />
        </div>
      </van-field>
      <van-field
        label="有效期起期"
        :input-align="inputAlign"
        class="refvalidDate"
        v-if="infoReg.hasOwnProperty('validDate')"
        @click="showPopAction('date', 'validDate', [])"
        :value="userInfo.validDate"
        readonly
        placeholder="请选择"
        @focus="tipsInfo.validDate = ''"
        :error-message="tipsInfo.validDate"
        :error-message-align="inputAlign"
      >
        <span class="ms-row-icon" slot="right-icon"></span>
      </van-field>
      <van-field
        label="有效期止期"
        :input-align="inputAlign"
        class="refvalidDateEnd"
        @click-input="showPopAction('date', 'validDateEnd', [])"
        :value="
          userInfo.validDateEnd == longTime ? '长期' : userInfo.validDateEnd
        "
        readonly
        placeholder="请选择"
        @focus="tipsInfo.validDateEnd = ''"
        :error-message="tipsInfo.validDateEnd"
        :error-message-align="inputAlign"
        v-if="
          infoReg.hasOwnProperty('validDateEnd') &&
          (longTime !== userInfo.validDateEnd || !showLonger)
        "
      >
        <span
          class="ms-row-icon"
          slot="right-icon"
          v-if="!validDateDisabled"
        ></span>
      </van-field>
      <van-field
        label="国籍"
        :input-align="inputAlign"
        class="refnationality"
        @click="
          tipsInfo.nationality = '';
          showPopAction(
            'picker',
            'nationality',
            nationList,
            userInfo.nationality
          );
        "
        :value="userInfo.nationalityName"
        readonly
        placeholder="请选择"
        :error="tipsInfo.nationality !== ''"
        v-if="infoReg.hasOwnProperty('nationality')"
      >
        <span
          class="ms-row-icon"
          slot="right-icon"
          v-if="nationList.length > 1"
        ></span>
      </van-field>
      <!-- 现居地址 -->
      <van-field
        :input-align="inputAlign"
        class="refareaName"
        v-if="infoReg.hasOwnProperty('areaName')"
        @click="showPopAction('address', 'areaName', [])"
        :value="userInfo.areaName"
        label="现居地址"
        type="textarea"
        rows="1"
        autosize
        readonly
        placeholder="请选择"
        @focus="tipsInfo.areaName = ''"
        :error-message="tipsInfo.areaName"
        :error-message-align="inputAlign"
      >
        <span class="ms-row-icon" slot="right-icon"></span>
      </van-field>
      <van-field
        :input-align="inputAlign"
        class="refpermanentAddress"
        v-if="infoReg.hasOwnProperty('permanentAddress')"
        v-model="userInfo.permanentAddress"
        label="详细地址"
        type="textarea"
        rows="1"
        maxlength="30"
        autosize
        clearable
        :placeholder="detailAddrRule ? `必须包含:${detailAddrRule}` : '请输入'"
        @input="tipsInfo.permanentAddress = ''"
        @blur="validInfo('address')"
        :error-message="tipsInfo.permanentAddress"
        :error-message-align="inputAlign"
      />
      <van-field
        class="refphone"
        :class="tipsInfo.phone ? 'van_ms_err' : ''"
        :input-align="inputAlign"
        v-if="infoReg.hasOwnProperty('phone')"
        v-model="cpPhoneNum"
        label="手机号码"
        type="number"
        :maxlength="foI2 ? '11' : '13'"
        clearable
        placeholder="请输入"
        @focus="
          foI2 = true;
          tipsInfo.phone = '';
        "
        :error-message="tipsInfo.phone"
        :error-message-align="inputAlign"
        @blur="foI2 = false"
      >
      </van-field>
      <!--注意获取验证吗的时机-->
      <van-field
        class="phone_code_md"
        v-if="infoReg.hasOwnProperty('validCode')"
        :input-align="inputAlign"
        v-model="userInfo.validCode"
        label="短信验证"
        type="number"
        maxlength="6"
        clearable
        placeholder="请输入"
      >
        <VerifyCode :phone="userInfo.phone" slot="button"></VerifyCode>
      </van-field>
      <van-field
        label="职业名称"
        :input-align="inputAlign"
        class="refoccupationCode"
        :value="userInfo.occupationCodeName"
        @click="
          showPopAction('job', 'occupationCode', []);
          tipsInfo.occupationCode = '';
        "
        type="textarea"
        rows="1"
        autosize
        readonly
        placeholder="请选择"
        @focus="tipsInfo.occupationCode = ''"
        :error-message="tipsInfo.occupationCode"
        :error-message-align="inputAlign"
        v-if="infoReg.hasOwnProperty('occupationCode')"
      >
        <span class="ms-row-icon" slot="right-icon"></span>
      </van-field>
      <div class="van-cell extro" v-if="infoReg.hasOwnProperty('email')">
        <van-field
          :input-align="inputAlign"
          class="refemail"
          v-model="userInfo.email"
          @input="showEmailAppend = true"
          @blur="hideAppend"
          @focus="
            tipsInfo.email = '';
            showEmailAppend = true;
          "
          label="电子邮箱"
          type="email"
          clearable
          placeholder="请输入"
          :error-message="tipsInfo.email"
          :error-message-align="inputAlign"
        >
        </van-field>
        <div class="hintBox" v-if="emails.length > 0 && showEmailAppend">
          <div
            @click="userInfo.email = mail"
            class="hintItem"
            v-for="mail in emails"
            :key="mail"
          >
            {{ mail }}
          </div>
        </div>
      </div>
      <van-field
        label="年收入"
        class="refincome"
        :input-align="inputAlign"
        :value="userInfo.income"
        type="number"
        placeholder="请输入"
        @input="changeIncome"
        @focus="tipsInfo.income = ''"
        :error="tipsInfo.income !== ''"
        v-if="infoReg.hasOwnProperty('income')"
      >
        <template #button>
          <span class="field_unit">万元</span>
        </template>
      </van-field>
      <van-field
        :input-align="inputAlign"
        class="refsocialInsuFlag btn_pad3"
        v-if="infoReg.hasOwnProperty('socialInsuFlag')"
        readonly
        @focus="tipsInfo.socialInsuFlag = ''"
        :error-message="tipsInfo.socialInsuFlag"
        :error-message-align="inputAlign"
      >
        <div slot="label" class="flex_ac">
          <span>{{ socialName }}</span>
          <FieldDescMode field="socialInsuFlag" />
        </div>
        <template #input>
          <MsRadio
            :curVal="userInfo.socialInsuFlag"
            btnType="socialInsuFlag"
            labelName="text"
            valueName="keyId"
            flexName="mag0"
            :arrList="socialSecList"
            @clickEvent="changeRadioInfo"
          />
        </template>
      </van-field>
      <!-- 个税说明 -->
      <van-field
        :input-align="inputAlign"
        class="refcrsIdType"
        v-if="infoReg.hasOwnProperty('crsIdType')"
        @click="openCrsIdType"
        :value="userInfo.crsIdTypeName"
        label-width="120px"
        readonly
        placeholder="请选择"
        :error-message="tipsInfo.crsIdType"
        :error-message-align="inputAlign"
        @focus="tipsInfo.crsIdType = ''"
      >
        <div slot="label" class="flex_ac">
          <span>税收居民类型</span>
          <FieldDescMode field="crsIdType" />
        </div>
        <span class="ms-row-icon" slot="right-icon"></span>
      </van-field>
      <!-- 证件照 -->
      <van-field
        :input-align="inputAlign"
        class="reffrontImg"
        label-width="120px"
        readonly
        @click="
          tipsInfo.frontImg = '';
          toOcrUpload();
        "
        @focus="tipsInfo.frontImg = ''"
        :error-message="tipsInfo.frontImg"
        :error-message-align="inputAlign"
        v-if="showFrontImg"
      >
        <div slot="label" class="userSelect">
          <span>证件照上传</span>
          <FieldDescMode field="frontImg" v-if="idImgNotCheck.includes('0')" />
        </div>
        <template #input>
          <div class="flex_ac">
            {{ userInfo.frontImg ? "已上传" : "请上传" }}
            <MsImgIcon name="camera_l" size="22" style="margin-left: 5px" />
          </div>
        </template>
      </van-field>
    </div>
    <van-popup
      v-model="showPop"
      overlay-class="lay1_shark"
      round
      position="bottom"
    >
      <div v-if="showPop">
        <van-picker
          v-if="popConfig.type == 'picker'"
          ref="picker"
          show-toolbar
          :columns="viewOptions"
          @confirm="onConfirmPick"
          @cancel="showPop = false"
          :default-index="defaultIndex"
        >
          <div slot="title" class="keyBox" v-if="popConfig.list.length > 8">
            <input
              type="text"
              class="keyInput"
              placeholder="请输入关键字查询"
              v-model="keyWord"
            />
          </div>
        </van-picker>
        <van-datetime-picker
          v-else-if="popConfig.type == 'date'"
          :value="currentDate"
          :min-date="minDate"
          :max-date="maxDate"
          type="date"
          @confirm="onConfirmDate"
          @cancel="showPop = false"
        />
        <OccupationPop
          v-else-if="popConfig.type == 'job'"
          @cancel="showPop = false"
          @confirm="onConfirmDJob"
        />
        <Address
          v-else-if="popConfig.type == 'address'"
          @cancle="showPop = false"
          @addresssConfirm="addresssConfirm"
        />
      </div>
    </van-popup>
    <OcrRecoganizeUpload
      :showOcrPop="showSheet"
      ocrType="tbr"
      ref="tbrOcrUploadRef"
      @sureBtn="sureOcrRes"
      v-if="showSheet"
    />
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import { validUserInfo } from "@/translate/validate/customer";
import { userInfoMix } from "@/mixins/userInfo";
import { money } from "@/utils/index";
import FieldDescMode from "./FieldDescMode";
import VerifyCode from "./VerifyCode";
import OcrRecoganizeUpload from "./OcrRecoganizeUpload";

export default {
  mixins: [userInfoMix],
  name: "ApplicantModule",
  components: {
    FieldDescMode,
    VerifyCode,
    OcrRecoganizeUpload,
  },
  computed: {
    ...mapGetters({
      idTypeList: "dictionary/applicantIdTypeList",
      showedRisks: "risks/showedRisks",
      holderTypeList: "dictionary/holderTypeList",
      tbBirthStrMin: "infoReg/tbBirthMin",
      tbBirthStrMax: "infoReg/tbBirthMax",
    }),
    infoReg() {
      return this.inputReg.applicant;
    },
  },
  watch: {
    userInfo: {
      handler: function (val) {
        if (this.pageLoad) {
          this.$store.commit("insert/UPDATE_APPLICANT", val);
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      userType: "投保人",
      userInfo: {},
    };
  },
  created() {
    Object.assign(this.userInfo, this.applicant);
    this.initDefaultData();
    this.$nextTick(() => {
      this.pageLoad = true;
    });
  },
  methods: {
    changeIncome(e) {
      this.userInfo.income = money(e);
    },
    async saveForm() {
      // 根据证件号查询是否已存在承保保单并验证姓名
      let uData = JSON.parse(JSON.stringify(this.userInfo));
      const ruleInput = JSON.parse(JSON.stringify(this.infoReg));
      // console.log('saveForm---1', this.userInfo);
      this.$store.commit("insert/UPDATE_APPLICANT", uData);
      let res = validUserInfo(ruleInput, uData, "投保人");
      if (res.status == false) {
        let id = "ref" + res.target;
        let target = document.querySelector("." + id);
        this.tipsInfo[res.target] = res.msg;
        if (target) {
          target.scrollIntoView({
            behavior: "smooth",
            block: "center",
          });
        }
        this.$toast(res.msg);
      }
      // 验证码校验
      if (res.status && this.infoReg.hasOwnProperty("validCode")) {
        res = await this.checkSmsCode();
      }
      return res;
    },
    toOcrUpload() {
      this.showSheet = true;
      this.$nextTick(() => {
        this.$refs.tbrOcrUploadRef.initModule(this.userInfo);
      });
    },
  },
};
</script>
<style lang="less" scoped>
@import "../style.less";
</style>
